<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 600px;
        height: 200px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="wormId" width="50"> </el-table-column>
      <el-table-column property="wormName" label="名称" width="120">
      </el-table-column>
      <el-table-column property="wormHost" label="寄主" width="120">
      </el-table-column>
      <el-table-column property="wormHarm" label="主要危害"></el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 100px"
        >
        </el-pagination>

        <div style="margin: 20px 100px">
          <el-button @click="addWorm()">添加新虫害</el-button>
          <el-button @click="getwormById(wormId)">查看详细信息</el-button>
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 290px">
            <legend>查询虫害信息</legend>
            <form action="">
              害虫名：<input type="text" v-model="wormName" style="margin: 20px" />
              <br>
              寄主：<input type="text" v-model="wormHost" style="margin: 20px" />
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 20px"
              />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">虫害详细信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 80px 30px">名称：{{ wormList.wormName }}</p>
          <p style="margin: 80px 30px">繁殖： {{ wormList.wormBreed }}</p>
          <p style="margin: 80px 30px">寄主：{{ wormList.wormHost }}</p>
          <p style="margin: 80px 30px">天敌{{ wormList.wormEnemy }}</p>
          <p style="margin: 80px 30px">防治措施：{{ wormList.wormMeasure }}</p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            幼虫图片：
            <img
              :src="'/api' + wormList.wormLarva"
              alt="哦豁，图片找不到---瓜了"
              style="width: 220px;height:160px"
              
            />
          </p>
          <p style="margin: 50px 30px">
            成虫图片：
            <img
              :src="'/api' + wormList.wormImago"
              alt="哦豁，图片找不到---瓜了"
               style="width: 220px;height:160px"
            />
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="margin-right: 240px; margin-bottom: 50px"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加虫害</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            名称：<input type="text" v-model="wormName" />
          </p>
          <p style="margin: 50px 30px">
            繁殖：<input type="text" v-model="wormBreed" />
          </p>
          <p style="margin: 50px 30px">
            幼虫图片：
            <el-upload
              class="avatar-uploader"
              action="/api/up/upload"
              :http-request="testUpload1"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="image" :src="image" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
          <p style="margin: 50px 30px">
            防治措施：<input type="text" v-model="wormMeasure" />
          </p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            寄主：<input type="text" v-model="wormHost" />
          </p>
          <p style="margin: 50px 30px">
            天敌：<input type="text" v-model="wormEnemy" />
          </p>
          <p style="margin: 50px 30px">
            成虫图片：
            <!-- 文件上传 -->
            <el-upload
              class="avatar-uploader"
              action="/api/up/upload"
              :http-request="testUpload"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:50px;height:50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </p>
          <p style="margin: 50px 30px">
            主要危害：<input type="text" v-model="wormHarm" />
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      wormId: "",
      wormName: "",
      wormBreed: "",
      wormHost: "",
      wormHarm: "",
      wormEnemy: "",
      wormMeasure: "",
      wormLarva: "",
      wormImago: "",
      wormList: [],
      imageUrl:"",
      image:"",
      dialogVisible: false,
      dialog: false,
    };
  },
  computed: {
    ...mapState("worm", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("worm", ["setParam"]),
    ...mapActions("worm", ["findByItem"]),

    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    get() {
      let paramObj = this.param;
      paramObj.wormName = this.wormName;
      paramObj.wormHost = this.wormHost;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    async getwormById(wormId) {
      let paramobj = { wormId: wormId };

      let WormObj = await this.ajax.getSubmit(
        "/api/worm/findWormById",
        paramobj
      );

      console.log(WormObj);

      this.wormList = WormObj;

      this.dialogVisible = true;
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.wormId);

      this.wormId = row.wormId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addWorm() {
      this.dialog = true;
    },
    async testUpload(item) {
      let info = await this.ajax.uploadSubmit("/api/up/upload", {
        file: item.file,
      });
      console.log(info);
      this.imageUrl = "/api/img/" + info;


      this.wormImago = "/img/" + info;
    },
    async testUpload1(item) {
      let info = await this.ajax.uploadSubmit("/api/up/upload", {
        file: item.file,
      });
      console.log(info);
      this.image = "/api/img/" + info;


      this.wormLarva = "/img/" + info;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    async add() {

      console.log(this.wormImago)
      let Wormmobj = {
        wormName: this.wormName,
        wormBreed: this.wormBreed,
        wormHost: this.wormHost,
        wormHarm: this.wormHarm,
        wormEnemy: this.wormEnemy,
        wormMeasure: this.wormMeasure,
        wormLarva: this.wormLarva,
        wormImago: this.wormImago,
      };

      let Obj = await this.ajax.getSubmit("/api/worm/addWorm", Wormmobj);

      console.log(Obj);

      if (Obj != null) {
        alert("添加成功");
      }

      this.dialog = false;

      this.findByItem()
    },
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>